<template>
    <section class="warp">
      <div class="searchIpt clearFix">

        <!--sync：同步的意思，子组件的is-show和父组件是双向绑定的-->
        <select-input :title="title" :is-show.sync='listShow'></select-input>

        <list v-show='listShow' :data="listData" @changeTitle="titleHandle"></list>

      </div>
    </section>
</template>

<script>

import selectInput from '@/components/selectInput'
import list from '@/components/list'

let listData=[
  {
    title:'JavaScript'
  },
  {
    title:'HTML5'
  },
  {
    title:'CSS3'
  },
  {
    title:'Vue'
  },
  {
    title:'React'
  }

]
export default {

  data(){
      return {
        listShow:false,

        listData:listData,

        title:''
      }
  },
  components: {
    selectInput,
    list
  },
  methods:{

    titleHandle(title){

      this.title=title;

    }
  }
}
</script>
